<template>
  <div id="systemPage">
    <el-menu :default-active="active" :unique-opened="true" class="el-menu-vertical-demo" :collapse="isCollapse"
    >
      <el-menu-item index="head" @click="showMeun">
        <i class="el-icon-caret-right"></i>
        <span slot="title">折叠</span>
      </el-menu-item>
      <el-submenu v-for="(item, index) in submenu" :key="index" v-if="item.children !== ''" :index="item.id">
        <template slot="title">
          <i :class="item.menu_icon"></i>
          <span slot="title">{{ item.menu_name }}</span>
        </template>
        <el-menu-item v-for="(subitem, index) in item.children" :key="index" :index="subitem.menu_url"
                      @click="enterMenuUI(subitem.menu_url)">
          <i :class="subitem.menu_icon"></i>
          <span slot="title">{{ subitem.menu_name }}</span>
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-for="(subitem, index) in submenu" :key="index" v-if="subitem.children === ''"
                    :index="subitem.menu_url" @click="enterMenuUI(subitem.menu_url)">
        <i :class="subitem.menu_icon"></i>
        <span slot="title">{{ subitem.menu_name }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import databack from '../../assets/file/leftMenu.json'

  export default {
    name: 'systemPage',
    props: ['systemName'],
    data () {
      return {
        isCollapse: false,
        system: '',
        active: '',
        menuLIst: [],
        submenu: [],
        tempMap: {
          'talentcenter': '111f6d4279c941a3a0be0974d2b2ec87',
          'talentexchange': '8971DF78532D43A891C2451DA6EB6B9F',
          'talentservice': '3512a433a18140d0953fafce4d374ae6',
          'newscenter': '0B7214FF654F43A4B7078AC69EC5AB3A',
          'systemset': '1',
          'projectmanagement': '35cbbd0d89044fdaadff677ae9006731'
        }
      }
    },
    created () {
      this.submenu = databack
      this.active = this.$route.path
      this.createdComponent()
    },
    methods: {
      createdComponent () {
        if (this.systemName === 'talentcenter') {
          this.createMenus()
        } else if (this.systemName === 'talentexchange') {
          this.createMenus()
        } else if (this.systemName === 'talentservice') {
          this.createMenus()
        } else {
          this.createMenu()
        }
      },
      createMenus () {
        this.menuLIst = []
        let _this = this
        let paragram = new Object()
        paragram.subsys_id = '111f6d4279c941a3a0be0974d2b2ec87'
        postDataToServer('ACCOUT_MENUS', paragram).then((data) => {
          if (data.status === 0) {
            _this.menuLIst = _this.menuLIst.concat(data.data_list)
          } else {
            _this.$message.error(data.message)
          }
        }).then(() => {
          let paragram = new Object()
          paragram.subsys_id = '8971DF78532D43A891C2451DA6EB6B9F'
          postDataToServer('ACCOUT_MENUS', paragram).then((data) => {
            if (data.status === 0) {
              _this.menuLIst = _this.menuLIst.concat(data.data_list)
            } else {
              _this.$message.error(data.message)
            }
          }).then(() => {
            let paragram = new Object()
            paragram.subsys_id = '3512a433a18140d0953fafce4d374ae6'
            postDataToServer('ACCOUT_MENUS', paragram).then((data) => {
              if (data.status === 0) {
                _this.menuLIst = _this.menuLIst.concat(data.data_list)
              } else {
                _this.$message.error(data.message)
              }
            }).then(() => {
              _this.constructMenuTree()
            })
          })
        })
      },
      createMenu () {
        this.menuLIst = []
        if (this.tempMap[this.systemName]) {
          let _this = this
          let subsys_id = this.tempMap[this.systemName]
          let paragram = new Object()
          paragram.subsys_id = subsys_id
          postDataToServer('ACCOUT_MENUS', paragram).then((data) => {
            if (data.status === 0) {
              _this.menuLIst = data.data_list
            } else {
              _this.$message.error(data.message)
            }
          }).then(() => {
            _this.constructMenuTree()
          })
        }
      },
      constructMenuTree () {
        let _this = this
        this.menuLIst.forEach((element, index) => {
          if (element['lever'] === 1) {
            for (let key in _this.menuLIst) {
              if (_this.menuLIst[key].id === element['parent_menuid']) {
                _this.menuLIst[key].lever = 9
                break
              }
            }
          }
        })
      },
      getMenuBerHeight () {
        var height = window.screen.availHeight
        var MenuBar = document.getElementById('systemPage')

        MenuBar.style.height = height - 100 + 'px'
      },
      enterMenuUI (path) {
        this.$router.push({'path': path})
      },
      showMeun () {
        if (this.isCollapse === true) {
          this.isCollapse = false
        } else {
          this.isCollapse = true
        }
      },
    },
    mounted () {
      this.getMenuBerHeight()
    },
    watch: {
      systemName (val, oldVal) {
        if (val === 'talentcenter' || val === 'talentexchange' || val === 'talentservice') {
          if (oldVal !== 'talentcenter' && oldVal !== 'talentexchange' && oldVal !== 'talentservice') {
            this.createMenus()
          }
        } else {
          this.createdComponent()
        }
      }
    },
  }
</script>

<style scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    min-height: 100%;
  }

  .el-menu--collapse {
    min-height: 100%;
  }
</style>
